<template>
    <div class="flow-box">
        <!-- 项目流程 ********************* -->
        <NewCard :title="getTitle()" :isright="isright" v-if="flowOrAgreeShow">
            <!-- 办理条件 -->
            <template slot="right">
                <p class="condition">
                    办理条件 
                    <svg-icon icon-class="ts_icon" @click="drawer=true"/>
                    <svg-icon icon-class="fx_icon" @click="isShowCard=true"/>
                </p>
                <ShareBox :thisContentUrl="thisContentUrl" :isShowCard.sync="isShowCard"></ShareBox>
                <div class="conditions">
                    <el-drawer
                        :title="`${threeName}-办理条件`"
                        :visible.sync="drawer"
                        size="40%"
                        direction="rtl">
                        <div class="conditionsTxt">
                            <h3>
                                <p>序号</p>
                                <p>条件</p>
                            </h3>

                            <template v-for="group in criteria">
                                <h4>{{group.group}}</h4>
                                <ul>
                                    <li v-for="list in group.children" :key="list.id">
                                        <i>{{list.no > 9 ? list.no : "0" + list.no}}</i>
                                        <p>{{list.name}}</p>
                                    </li>
                                </ul>
                            </template>
                            
                        </div>
                    </el-drawer>
                </div>
            </template>

            <!-- 流程步骤 -->
            <div class="stepList">
                <h3>
                    <p>步骤</p>
                    <p>事项</p>
                    <p>支付比例</p>
                    <p>金额</p>
                    <p>作业天数({{allWorkDay}}天)</p>
                </h3>
                <!-- 1 -->
                <div class="stepBox">
                    <el-steps direction="vertical">

                        <template v-for="group in step">
                            <h3>{{group.group}}</h3>
                            <el-step v-for="list in group.children" :key="list.id">
                                <template slot="title">
                                    <h3>{{list.name}}</h3>
                                    <p class="ratio">{{list.scale ? list.scale + '%' : '--'}}</p>
                                    <p class="sum">{{list.scale ? (allData.base * (list.scale/100))/10000+'万' : '--'}}</p>
                                    <p class="numDays">{{list.workday}}个工作日</p>
                                </template>
                            </el-step>
                        </template>

                    </el-steps>
                </div>
            </div>

            <!-- 按钮 -->
            <div class="addBtnBox">
                <!-- 可委托地区 -->
                <div class="entRegion">
                    可委托地区：
                    <span v-if="currentDetail.areaType == '1'">全国</span>
                    <span v-else v-for="city in region" :key="city.value">{{city.label}}<i>、</i></span>
                </div>
                <SubBtn>
                    <template slot="btn">
                        <h3 class="btnTxt">预计需{{allData.base/10000}}万</h3>
                        <!-- 根据cityList判断有没有专家，没有专家不能下单 -->
                        <div v-if="allData.cityList && allData.cityList.length">
                            <el-select v-model="project.cityCode" @change="changeCity" placeholder="选择适用地区" v-if="currentDetail.areaType != '1'">
                                <el-option
                                    v-for="item in region"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <el-button round class="addBtn" @click="clickAddBtn">委托办理</el-button>
                        </div>
                        <p v-else>该项目无专家</p>
                    </template>
                </SubBtn>
            </div>
        </NewCard>

        <!-- 项目协议 ************************************* -->
        <NewCard :title="`${threeName}委托协议`" isleft="isleft" v-else>
            <template slot="left">
                <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
            </template>
            <div class="agreement-box" v-if="agreementData">
                <div v-html="agreementData.content"></div>
            </div>
            <SubBtn>
                <template slot="btn">
                    <el-button round @click="goBackFlow">返回</el-button>
                    <el-button round class="addBtn" @click="placeOrder">我已仔细阅读</el-button>
                </template>
            </SubBtn>
        </NewCard>
    </div>
</template>

<script>
import SubBtn from "@/components/subBtn/subBtn.vue"
import NewCard from "@/wss/components/newCard.vue";
// 分享的组件
import ShareBox from "@/components/shareBox/index.vue"

import {switchTree} from "@/wss/utils/wss.js";
import { getProjectConditionListApi,} from "@/wss/newApi_3-24/work/projectCondition.js";

//引入省市区数据的插件
import { CodeToText } from "element-china-area-data";
import { getProjectPriceSelectByTypeApi,addProjectApi,getOrderByIdApi,getRichTextListApi } from "@/BMViews/api/doc/project.js"
export default {
    name:'Flow',
    components:{NewCard,SubBtn,ShareBox},
    props:{
        firstName:{type:String},
        secondaryName:{type:String},
        threeName:{type:String},
        currentDetail:{type:Object}
    },
    data(){
        return{
            isright:true,//右上角办理条件
            drawer:false,//右上角办理条件显示
            isShowCard: false,//分享按钮的显示隐藏
            thisContentUrl: '',//分享的链接

            allWorkDay: 0,//总作业天数

            allData:{},
            criteria:[],//当前的条件列表
            step:[],//当前的步骤列表

            // 委托地区
            region: [],

            // 发送给支付页面的数据
            project:{
                city:'',
                cityCode:'',
                type:'',
                typeId:'',
                userId:'',
                userName:'',
                base: 0,//总金额
                nowBase: 0,// 本次支付的金额
                firstName:'',
                secondaryName:'',
                threeName:'',
            },
            orderinfo: {},//订单信息

            // ****************项目协议****************
            flowOrAgreeShow: true,//显示true流程或者false协议
            agreementData: {},//项目协议的内容
        }
    },
    mounted(){
        if(this.currentDetail.id){
            this.getProjectPriceSelectByType() //获取当前点击的这条项目的信息
            this.getProjectConditionList() //获取项目条件列表
            this.getShareLink()// 获取当前项目的分享链接
        }
    },
    watch:{
        // 当选择的类型更新时
        currentDetail(newValue,oldValue){
            this.getProjectPriceSelectByType() //获取当前点击的这条项目的信息
            this.getProjectConditionList() //获取项目条件列表
            this.getShareLink()// 获取当前项目的分享链接
            // 显示true项目流程
            this.flowOrAgreeShow = true
        },
    },
    methods:{
        // 获取项目的名称
        getTitle(){
            let option = this.$route.path
            if(option.includes('Loans')){
                return `${this.firstName}-${this.secondaryName}`
            }else{
                return `${this.firstName}-${this.secondaryName}-${this.threeName}`
            }
        },

        // 在项目协议点击返回 点击返回按钮
        returnBtn(){
            this.flowOrAgreeShow = true
        },

        // 获取当前项目的分享链接
        getShareLink(){
            let href = window.location.host //获取当前域名 不带http://
            let route = this.$route.fullPath
            let twoId = this.currentDetail.pid
            let threeId = this.currentDetail.id
            this.thisContentUrl = `http://${href}${route}?typeId=${twoId},${threeId}`
        },

        //获取项目条件列表
        async getProjectConditionList() {
            // this.typeId = this.currentDetail.id
            let typeId = this.currentDetail.id
            let result = await getProjectConditionListApi({typeId});
            if (result.code == 200) {
                //根据no字段排序
                let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
                // 转换树形结构
                this.criteria = switchTree(arr);
            }
        },

        //获取当前点击的这条项目的信息
        async getProjectPriceSelectByType(){
            this.typeId = this.currentDetail.id
            let typeId = this.currentDetail.id
            let result = await getProjectPriceSelectByTypeApi(typeId)
            if (result.code == 200) {
                this.allData = result.data
                //根据no字段排序
                let arr = result.data.flowList.sort((a, b) => Number(a.no)- Number(b.no))
                // 转换树形结构
                this.step = switchTree(arr);

                // 计算总作业天数
                this.allWorkDay = 0 //切换初始化天数
                result.data.flowList.forEach(item=>{
                    this.allWorkDay += item.workday
                })

                // 城市的数据 this.region
                this.region = [] //先清空之前的城市
                let cityList = result.data.cityList
                cityList.sort((a,b) => a-b)
                cityList.forEach(item => {
                    if(item){
                        this.region.push({
                            label: CodeToText[item],
                            value: item,
                        })
                    }
                })

                // 获取发送给支付页面的数据
                this.project.type = this.currentDetail.type
                this.project.typeId = this.currentDetail.id
                this.project.userId = this.$store.state.user.userId
                this.project.userName = this.$store.state.user.userInfo.nickName
                // 总金额
                let base = result.data.base
                this.project.base = base
                // 第一条步骤的收比
                let scale = this.step[0].children[0].scale
                this.project.nowBase = base*(scale/100)

                // 当前选中的一级类别 二级类别 三级类别
                this.project.firstName = this.firstName
                this.project.secondaryName = this.secondaryName
                this.project.threeName = this.threeName
            }
        },

        //选择城市之后
        changeCity(){
            this.project.city = CodeToText[this.project.cityCode]
        },

        // 点击委托办理按钮的回调
        async clickAddBtn(){
            if(this.project.cityCode == '' && this.currentDetail.areaType != "1"){
                this.$message({type:"warning",message:"请选择适用地区！"})
            }else{
                await this.getRichTextList() //根据type id查询项目协议
                // 显示false项目协议
                this.flowOrAgreeShow = false
            }
        },

        // 项目下单的接口
        async addProject(){
            let project = {
                city: this.project.city || '全国', //城市
                cityCode: this.project.cityCode || 'cn', //城市编码
                type: this.project.threeName, //项目type
                typeId: this.project.typeId, //项目id
                userId: this.project.userId, //用户id
                userName: this.project.userName, //用户名字
                email: this.$store.state.user.email, //绑定的邮箱
                // title: this.currentDetail.name, //项目名称
                title: this.project.threeName, //项目名称
            }
            let result = await addProjectApi(project)
            if(result.code != 200) return
            this.orderinfo = result
        },

        //查项目订单goodsId
        async getOrderById(){
            let orderId = this.orderinfo.orderId
            let result = await getOrderByIdApi({id:orderId})
            if(result.code!=200) return
            let info = this.orderinfo
            this.orderinfo = Object.assign(info, result);
        },
        

        // *************项目协议*************

        // 点击项目协议 返回按钮
        goBackFlow(){
            // 显示true项目流程
            this.flowOrAgreeShow = true
        },

        // 点击项目协议 我已知晓按钮
        async placeOrder(){
            await this.addProject() // 项目下单的接口
            //查项目订单goodsId
            await this.getOrderById()

            // 获取第一个步骤的id
            let flowId = this.step[0].children[0].id
            
            // 跳转支付页面
            this.$bus.$emit('handlerPay', 3, this.project, this.orderinfo, this.step, flowId)
        },

        //根据当前选择的类型id查询对应的项目协议
        async getRichTextList(){
            let typeId = this.typeId
            let result = await getRichTextListApi({typeId})
            if(result.code==200){
                this.agreementData = result.data.rows[0]
            }
        },
        
    },
    
}
</script>

<style scoped>
ul,h3,h4,p{
    margin: 0;
    padding: 0;
    list-style: none;
}
.flow-box{
    height: 100%;
}
.flow-box >>> .top{
    position: relative;
}
.flow-box >>> .left{
    flex: 6;
}

/* 办理条件 */
.condition{
    font-size: 12px;
    color: #999;
}
.condition svg{
    font-size: 16px;
    cursor: pointer;
}
.condition svg:last-child{
    margin-left: 10px;
}
::v-deep .conditions .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .conditions .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
.conditions .conditionsTxt {
    padding: 0 20px;
}
.conditions .conditionsTxt h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 15px;
}
.conditions .conditionsTxt h3>p:first-child{
    width: 50px;
}
.conditions .conditionsTxt h3>p:nth-child(2){
    flex-grow: 1;
}
.conditions .conditionsTxt h4{
    font-size: 14px;
    font-weight: 600;
    color: #2E3F5E;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
}
.conditions .conditionsTxt ul>li{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
    color: #2E3F5E;
}
.conditions .conditionsTxt ul>li i{
    display: block;
    width: 50px;
    font-style: normal;
}
.conditions .conditionsTxt ul>li p{
    width: calc(100% - 50px);
}
/* 办理条件 end*/

/* 步骤标题 */
.stepList>h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    padding: 15px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #EBEEF5;
}
.stepList>h3 p:nth-child(1){
    width: 40px;
}
.stepList>h3 p:nth-child(2){
    width: 36%;
}
.stepList>h3 p:nth-child(3){
    width: 20%;
}
.stepList>h3 p:nth-child(4){
    width: 20%;
}

/* 步骤 */
.stepBox{
    position: relative;
    padding-bottom: 45px;
}
.stepBox::before{
    content: '';
    position: absolute;
    left: 11px;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    z-index: 0;
}
.stepBox h3{
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    color: #2E3F5E;
}
::v-deep .stepBox .el-steps>h3{
    padding-top: 45px;
}
::v-deep .stepBox .el-steps>h3:first-child{
    padding-top: 0;
}
::v-deep .stepBox .el-step{
    padding-top: 45px;
}
::v-deep .stepBox .el-step__line{
    display: none;
}
::v-deep .stepBox .el-step__icon-inner{
    font-size: 12px;
    font-weight:400;
    color: #2E3F5E;
}
::v-deep .stepBox .el-step__head.is-finish{
    color: #EAEBED;
    border-color: #EAEBED;
}
::v-deep .stepBox .el-step__icon.is-text{
    border: 1px solid #EAEBED;
}
::v-deep .stepBox .el-step__title.is-wait{
    color: #2E3F5E;
    font-size: 14px;
}

::v-deep .stepBox .el-step__title {
    display: flex;
    align-items: center;
    padding-bottom: 0;
}
::v-deep .stepBox .el-step__title h3{
    width: 39%;
    font-size: 14px;
    font-weight: 400;
    color: #2E3F5E;
}
::v-deep .stepBox .el-step__title .ratio{
    width: 21%;
}

::v-deep .stepBox .el-step__title .sum{
    width: 21%;
}

::v-deep .stepBox .el-step__title .ratio,
::v-deep .stepBox .el-step__title .sum{
    font-size: 12px;
    font-weight: 400;
    color: #A4ADBF;
}
::v-deep .stepBox .el-step__title .numDays{
    flex-grow: 1;
    font-size: 12px;
    font-weight: 400;
    color: #2E3F5E;
}
.stepList .stepBox:last-child{
    padding-bottom: 0;
    margin-bottom: 120px;
}

/* 选择适用地区 */
::v-deep .el-select{
    margin-right: 15px;
}
::v-deep .el-select .el-input__inner{
    width: 200px;
    border-radius: 18px;
    border: 1px solid #ECEDF0;
}

/* 底部按钮 */
::v-deep .addBtnBox .subBtn{
    justify-content: space-between;
    align-items: center;
    min-height: 77px;
}
.addBtnBox .btnTxt{
    font-size: 18px;
    font-weight: 600;
    color: #F87A23;
}
.addBtnBox div>p{
    color: #666;
    font-size: 14px;
}
.addBtnBox .entRegion{
    position: absolute;
    bottom: 77px;
    left: 0;
    font-size: 12px;
    color: #909AAA;
    width: 100%;
    padding: 10px 20px;
    background-color: #F4F5F8;
    border-top: #ECEDF0;
    z-index: 99;
}
.addBtnBox .entRegion span:last-child i{
    display: none;
}
</style>
<style scoped>
/* 项目协议 */
.agreement-box{
    margin-bottom: 100px;
    font-size: 14px;
    font-weight: 400;
    color: #232323;
    line-height: 26px;
}
.agreement-box >>> p{
    margin: 0;
    /* margin-bottom: 15px; */
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
    ::v-deep .top .right{
        flex: 1.5;
    }
    .stepList>h3 p:nth-child(2){
        width: 32%;
    }
    ::v-deep .stepBox .el-step__title h3{
        width: 37%;
    }
    ::v-deep .el-select .el-input__inner{
        width: 145px;
    }
    .subBtn{
        padding: 10px 30px;
    }
    .addBtnBox .entRegion{
        bottom: 57px;
    }
    .stepBox .el-step{
        padding-top: 28px;
    }
    .stepBox h3{
        font-size: 16px;
    }
}
</style>